<script>
export default {
  name: 'LeftMenuView',
  data(){
    return{
      firstIndex:0,
      secondIndex:0,
      //健是一级标题   值-数组 是二级标题
      menuObj:{
        帮买取快递废品回收:["门店管理","驿站管理","商品管理","订单管理","废品回收订单"],
        胖虎甄选:["商品管理","订单管理","售后订单"],
        胖虎家政:["家政服务","订单管理","售后订单"],
      },
      //点击二级标题切换组件   将二级标题作为键值对的键名
      //点击二级标题  查找对应的路由路径
      routerObj1: {
        "帮买取快递废品回收":['/help/mendian','/help/yizhan','/help/shangpin','/help/dingdan','/help/feipinhuishou'],
        "胖虎甄选":['/zhenxuan/Shangpinguanli','/zhenxuan/dingdanguanli','/zhenxuan/shouhoudingdan'],
        "胖虎家政":['/jiazheng/jiazhengfuwu','/jiazheng/dingdanguanli','/jiazheng/shouhoudingdan'],
      },

      menuList: ["用户管理","骑手管理","家政管理","新用户红包","类目管理"],
      routerObj2: {
        用户管理: '/yonghu',
        骑手管理: '/qishou',
        家政管理: '/jiazheng',
        新用户红包: '/xinyonghu',
        类目管理: '/leimu',
      },
    }
  },
  props:["show"],
  methods:{
    handleOpen(value){
      console.log(value);
    },
    handleClose(value){
      console.log(value);
    },
    enterXiaoquAction(){
      this.firstIndex = 0;
      this.$router.push("/xiaoqu").catch(()=>{});
      this.$emit("pushIndex", this.firstIndex, this.secondIndex);

    },
    //点击二级标题事件  将标题作为键  取出对应的路由  切换组件
    showComponent(a, b,c){
      this.firstIndex = c + 1;
      this.secondIndex = b;
      this.$router.push(this.routerObj1[a][b]).catch(() => {});
      this.$emit("pushIndex", this.firstIndex, this.secondIndex);


    },
    showMenuList(key, index){
      this.firstIndex = 4 + index;
      this.secondIndex = index;
      this.$router.push(this.routerObj2[key]).catch(() => {});
      this.$emit("pushIndex", this.firstIndex, this.secondIndex);


    },

  },
}
</script>

<template>
<div :class="{leftMenu:true, width:show}">
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#304156"
      text-color="#fff"
      active-text-color="#409eff"
      :collapse="show">

    <el-menu-item index="1" @click="enterXiaoquAction">
      <i class="el-icon-loading"></i>
      <span slot="title">小区管理</span>
    </el-menu-item>

    <el-submenu v-for="(v, k, i) in menuObj" :index="i + 2 + ''" :key="k">
      <template slot="title">
        <i class="el-icon-loading"></i>
        <span>{{k}}</span>
      </template>
      <el-menu-item-group>

        <el-menu-item v-for="(value, j) in v" :key="value" @click="showComponent(k,j ,i)">{{value}}</el-menu-item>


      </el-menu-item-group>

    </el-submenu>
    <el-menu-item v-for="(a, b) in menuList" :index="b + 4 + ''" :key="a" @click="showMenuList(a, b)">
      <i class="el-icon-loading"></i>
      <span slot="title">{{a}}</span>
    </el-menu-item>
  </el-menu>
</div>
</template>

<style scoped>
.width{
  width: 64px !important;
}
.leftMenu{
  width: 230px;
  /*1vh=设备高度1% 是将当前设备的高度分100份  一份就是1vh*/
  height: 100vh;
  background-color: #304156;
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
/*  盒模型总宽250px*/
  transition: width .5s;
}
/*  媒介查询  就是监测浏览器宽高的变化  做出页面布局调整*/
@media only screen and (max-width: 1200px) {
  /*  页面宽度在1000以内  才会执行此处代码
    max-width:1000px  最大能监听到1000px的宽度*/
  .left-menu{
    visibility: hidden;
  }
}
.el-menu-vertical-demo{
  border-right: none;
}
</style>